<template>
    <div>
        <!--买房管家下的=====详细信息头部 头像 文字描述-->
        <el-row :gutter="20">
            <el-col :span="3"><div class="grid-content bg-purple">
                <div id="headerImg">
                    <img src="../assets/logo.png" alt="" width="100" height="100" border="1">
                </div>
            </div>
            </el-col>
            <el-col :span="21"><div class="grid-content bg-purple">
                <el-table align="center"
                          :data="tableData"
                          style="width: 100%">
                    <el-table-column align="center"
                                     prop="name"
                                     label="昵称"
                                     min-width="80">
                    </el-table-column>
                    <el-table-column align="center"
                                     prop="email"
                                     label="注册邮箱"
                                     min-width="100">
                    </el-table-column>
                    <el-table-column align="center"
                                     prop="name"
                                     label="姓名"
                                     min-width="100">
                    </el-table-column>
                    <el-table-column align="center"
                                     prop="date"
                                     label="注册时间"
                                     min-width="100">
                    </el-table-column>
                    <el-table-column align="center"
                                     prop="iPhone"
                                     label="注册手机"
                                     min-width="120">
                    </el-table-column>
                    <el-table-column align="center"
                                     prop="source"
                                     label="注册来源"
                                     min-width="100">
                    </el-table-column>
                    <el-table-column align="center"
                                     prop="analysts"
                                     label="专属分析师"
                                     min-width="100">
                    </el-table-column>
                    <el-table-column align="center"
                                     prop=""
                                     label="操作"
                                     min-width="140">
                        <template slot-scope="scope">
                            <el-button @click="manger(scope.row)" type="text" size="mini" round>分配</el-button>
                            <el-button type="text" size="mini" round @click="clickBack">返回</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div></el-col>
        </el-row>
        <!--详情下面的选项卡部分-->
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="找房委托" name="first" >
                <ZxEntrust></ZxEntrust>
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="5">
                </el-pagination>
                <div>
                    <ZxMemo></ZxMemo>
                </div>
            </el-tab-pane>
            <el-tab-pane label="楼盘测评" name="second">
                <ZxHouseText></ZxHouseText>
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="5">
                </el-pagination>
                <div>
                    <ZxMemo></ZxMemo>
                </div>
            </el-tab-pane>
            <el-tab-pane label="预约看房车" name="third">
                <!--最开始用弹性盒模型写的  单个数据绑定-->
               <!-- <div v-for="(item,index) in myLookHouse" :key="item.value">
                    <ZxLookHouse v-bind:customer="item.customer" v-bind:phone="item.phone"
                                 v-bind:houseName="item.houseName" v-bind:address="item.address"
                                 v-bind:getCar="item.getCar" v-bind:lookTime="item.lookTime"
                                 v-bind:driver="item.driver">
                    </ZxLookHouse>
                </div>-->
                <ZxLookHouse></ZxLookHouse>
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="5">
                </el-pagination>
                <div>
                    <ZxMemo></ZxMemo>
                </div>
            </el-tab-pane>
            <el-tab-pane label="关注的楼盘" name="fourth">
                <FocusHouse></FocusHouse>
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="5">
                </el-pagination>
                <div>
                    <ZxMemo></ZxMemo>
                </div>
            </el-tab-pane>
            <el-tab-pane label="楼盘浏览历史" name="five">
                <FocusHouse></FocusHouse>
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="5">
                </el-pagination>
                <div>
                    <ZxMemo></ZxMemo>
                </div>
            </el-tab-pane>
        </el-tabs>
        <ZxAnalystsDialog :visible="managePeopleVisible"
                          @onclose="closeD"
                          :title="nowTableTitle"
                          :data="form">
        </ZxAnalystsDialog>
</div>
</template>

<script>
    import ZxEntrust from "../components/ZxEntrust";
    import ZxMemo from "../components/ZxMemo";
    import ZxHouseText from "../components/ZxHouseText";
    import ZxLookHouse from "../components/ZxLookHouse";
    import FocusHouse from "../components/ZxFocusHouse";
    import ZxAnalystsDialog from "../components/ZxAnalystsDialog";
    export default {
        name: "Information",
        components:{
            ZxEntrust,
            ZxMemo,
            ZxHouseText,
            ZxLookHouse,
            FocusHouse,
            ZxAnalystsDialog
        },
        data(){
            return{
                tableData:[
                    {name: '王小虎', email: '123456789', num: '0',
                        date:'2020-10-31',iPhone:'13542348962',source:'安卓',analysts:'张三'}
                ],
                activeName: 'first',
                managePeopleVisible:false,
                nowTableTitle:'',
                form:''
            };
        },
        /*这里保存vueX的数据*/
        computed:{
        },
        methods: {
            handleClick(tab, event) {
               /* console.log(tab, event);*/
            },
            /*头部返回按钮*/
            clickBack(){
                this.$router.push({
                    name:'ZxHousingManager',
                    path:'/Home/ZxHousingManager',
                    query: {

                    },
                })
            },
            /*头部分配按钮*/
            manger(){
                this.managePeopleVisible=true
            },
            closeD(){
                this.managePeopleVisible=false
            },
        }
    }
</script>

<style lang="less" scoped>
    body{
        margin: 0;
        padding: 0;
    }
</style>